<template>
  <div class="dashboard-container">
      <el-card class="header-card">
        <div class="head-content"> 
          <div class="head-content-left">
            <div class="avatar"><img class="avatar-image" :src="avatar"></div>
            <div class="content">
              <div class="contentTitle">{{ showHelloContent() }}，{{username}}，祝你开心每一天！</div>
              <div>
                <span>{{workplace | officeValFilter}}</span> 
                <span> － </span>
                <span>{{department}}</span>
                <span> － </span>
                <span v-for="(item, index) in ranks" :key="item.id"> 
                  {{item.rank_name}}<span v-if="(index+1) !== ranks.length" >,</span>
                </span> 
              </div>
            </div>
          </div>
          <div class="head-content-right">
            <div class="statItem">
              <p>项目数</p>
              <p>{{own_project_count}}</p>
            </div>
            <div class="statItem">
              <p>本月推荐数</p>
              <p>{{own_cv_count}}</p>
            </div>
            <div class="statItem">
              <p>本月Offer数</p>
              <p>{{own_offer_count}}</p>
            </div>
            <div class="statItem">
              <p>本月回款数</p>
              <p>{{own_cash_amount}}</p>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="project-card">
        <div slot="header" class="clearfix">
          <span>进行中项目</span>
          <el-button v-if="isShowMyLiveProject==false" icon="el-icon-arrow-down" @click="expandSelect(true)"  style="float: right;"  >展开</el-button>
          <el-button v-else icon="el-icon-arrow-up" @click="expandSelect(false)" style="float: right;"  >收起</el-button>
        </div>
        <div v-show="isShowMyLiveProject"> 
          <MyLiveProjects> </MyLiveProjects>
        </div>
      </el-card>
      <div style="display: flex; flex-direction: row;"> 
        <div style="display: flex; flex-direction: column; width:50%;"> 
          <el-card class="project-card">
            <div slot="header" class="clearfix">
              <span>预计入职人员</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div>
              <div class="sign_offer_item" v-for="(item, index) in sign_offer_data" :key="index" >
                <router-link class="link-type" :to="'/candidate/detail/'+ item.candidate_id">
                <span> {{index+1}}:&nbsp;{{ item.candidate_name }}</span>
                <span>&nbsp;{{ (item.project && item.project.project_name) ? item.project.project_name : "暂无信息"}}&nbsp;</span>
                <span>{{(item.project && item.project.company_name) ? item.project.company_name : "暂无信息"}}&nbsp;{{item.create_date | timeFilter('{y}-{m}-{d} {h}:{i}')}}</span>
                </router-link>
              </div>
            </div>
          </el-card>

          <el-card class="project-card">
            <div slot="header" class="clearfix">
              <span>保证期人员</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div>
              <div class="onboading_item"  v-for="(item, index) in onboading_data" :key="index" >
                <router-link class="link-type" :to="'/candidate/detail/'+ item.candidate_id">
                <span> {{index+1}}:&nbsp;{{ item.candidate_name }}</span>
                <span>&nbsp;{{item.project.project_name}}&nbsp;{{item.project.company_name}}&nbsp;{{item.create_date | timeFilter('{y}-{m}-{d} {h}:{i}')}}</span>
                </router-link>
              </div>
            </div>
          </el-card>
        </div>
        <div style="display: flex; flex-direction: column; width:50%;"> 
          <el-card class="project-card">
            <div slot="header" class="clearfix">
              <span>最新公告</span>
              <router-link class="link-type" to='/dashboard/bulletinBoard'>
              <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
              </router-link>
            </div> 
            <div> 
              <div class="bulletin_item" v-for="(item, index) in bulletin_data" :key="index" >
                <router-link class="link-type" :to="'/dashboard/bulletinBoard/item/detail/'+ item.id">
                <span> {{index+1}}:&nbsp;{{ item.title }}</span>
                <span> &nbsp;{{ item.create_date | timeFilter('{y}-{m}-{d} {h}:{i}') }} </span>
                </router-link>
              </div>
            </div>
          </el-card>
          <el-card class="project-card">
            <div slot="header" class="clearfix">
              <span>动态</span>
              <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
            </div>
            <div>
              <div class="bulletin_item" v-for="(item, index) in newest_dynamic_state_data" :key="index" >
 
                <div v-if="item.type && item.type === 'offer'" 
                  style=" align-items: flex-start;display: flex; flex: 1 1;font-size: 0;border-bottom: 1px solid #e8e8e8;">
                  <div>
                      <img style="margin: 2px 6px 6px 2px;width: 30px;height: 30px;border-radius: 10px;" :src="item.consultant.user_avatar_url">
                  </div>
                  <div>
                    <div>
                      <span style="font-size: 16px;color: #606266;"> &nbsp;{{ item.consultant_name }}</span>
                      <span style="font-size: 16px;color: #606266;">&nbsp;新增offer</span>
                      <span v-if="item.company_fees" style="font-size: 18px;color:#1890ff;">&nbsp; 金额{{item.company_fees}}</span>
                    </div>
                    <div style="font-size: 14px;color:#b8bfc5; margin-left: 4px; ">
                     {{ item.create_date | timeFromNowFilter }}
                    </div>
                  </div>
                </div>
                <div v-if="item.type && item.type === 'client'" 
                  style=" align-items: flex-start;display: flex; flex: 1 1;font-size: 0;border-bottom: 1px solid #e8e8e8;">
                  <div>
                    <img style="margin: 2px 6px 6px 2px;width: 30px;height: 30px;border-radius: 10px;" :src="item.consultant.user_avatar_url">
                  </div>
                  <div>
                    <div>
                      <span style="font-size: 16px;color: #606266;"> &nbsp;{{ item.consultant_name }}</span>
                      <span style="font-size: 16px;color: #606266;">&nbsp;新增客户</span>
                      <span v-if="item.company_name" style="font-size: 16px;color:#1890ff;">&nbsp;{{item.company_name}}</span>
                    </div>
                    <div style="font-size: 14px;color:#b8bfc5; margin-left: 4px; ">
                      {{ item.create_date | timeFromNowFilter }}
                    </div>
                  </div>  
                </div>                
                <!-- </router-link> -->
              </div>
            </div>
          </el-card>
        </div>
      </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import MyLiveProjects from '@/views/dashboard/components/myLiveProjects'
import API from '@/utils/backend_api'
import moment from 'moment'
export default {
  name: 'dashboard',
  components: {
    MyLiveProjects
  },
  computed: {
    ...mapGetters([
      'username',
      'roles',
      'avatar',
      'workplace',
      'department',
      'ranks'
    ])
  },
  created() {
    API.bulletin.all({
      offset: 0,
      limit: 10,
      sort: '-create_date'
    }).then(response => {
      this.bulletin_data = response.data
    })
    API.cv.all({
      sort: '-create_date',
      cv_status: 'sign_offer',
      is_own: '1'
    }).then(response => {
      this.sign_offer_data = response.data
    })
    API.cv.all({
      sort: '-create_date',
      cv_status: 'onboading',
      is_own: '1'
    }).then(response => {
      this.onboading_data = response.data
    })

    API.report.own_cv_list_count({ start_date: this.start_date, end_date: this.end_date }).then(response => {
      if (response && response.data) {
        this.own_cv_count = response.data
      } else {
        this.own_cv_count = 0
      }
    })
    API.report.own_project_count({ start_date: this.start_date, end_date: this.end_date }).then(response => {
      if (response && response.data) {
        this.own_project_count = response.data
      } else {
        this.own_project_count = 0
      }
    })
    API.report.own_cv_offer_count({ start_date: this.start_date, end_date: this.end_date }).then(response => {
      if (response && response.data) {
        this.own_offer_count = response.data
      } else {
        this.own_offer_count = 0
      }
    })
    API.report.own_cash_back_amount({ start_date: this.start_date, end_date: this.end_date }).then(response => {
      if (response && response.data) {
        this.own_cash_amount = response.data
      } else {
        this.own_cash_amount = 0
      }
    })
    API.report.newest_dynamic_state({
    }).then(response => {
      let temp_data = []
      if (response.data && response.data.offer) {
        response.data.offer.map(item => {
          item.type = 'offer'
          temp_data.push(item)
        })
      }
      if (response.data && response.data.client) {
        response.data.client.map(item => {
          item.type = 'client'
          temp_data.push(item)
        })
      }
      temp_data = temp_data.sort(function(a, b) {
        return Number(b.create_date) - Number(a.create_date)
      })
      this.newest_dynamic_state_data = temp_data.slice(0, 10)
    })
  },
  data() {
    return {
      isShowMyLiveProject: true,
      own_project_count: 0,
      own_cv_count: 0,
      own_offer_count: 0,
      own_cash_amount: 0,
      newest_dynamic_state_data: [],
      bulletin_data: [],
      sign_offer_data: [],
      onboading_data: [],
      start_date: moment(moment().startOf('month').format('YYYY-MM-DD') + ' 00:00:00', 'YYYY-MM-DD HH:mm:ss').format('x'),
      end_date: moment(moment().endOf('month').format('YYYY-MM-DD') + ' 23:59:59', 'YYYY-MM-DD HH:mm:ss').format('x')
    }
  },
  methods: {
    expandSelect(isExpand) {
      if (isExpand) {
        this.isShowMyLiveProject = true
      } else {
        this.isShowMyLiveProject = false
      }
    },
    todo() {
      this.$router.push({
        name: 'cvTodo',
        params: {
          id: '1232'
        }
      })
    },
    showHelloContent() {
      const hour = new Date().getHours()
      if (hour < 6) {
        return '凌晨好'
      } else if (hour < 9) {
        return '早上好'
      } else if (hour < 12) {
        return '上午好'
      } else if (hour < 14) {
        return '中午好'
      } else if (hour < 17) {
        return '下午好'
      } else if (hour < 19) {
        return '傍晚好'
      } else if (hour < 22) {
        return '晚上好'
      } else {
        return '夜里好'
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.sign_offer_item{
  margin: 10px 0 10px 0;
  color: #08c;
  cursor: pointer;
}
.onboading_item{
  margin: 10px 0 10px 0;
  color: #08c;
  cursor: pointer;
}
.bulletin_item{
  margin: 10px 0 10px 0;
  color: #08c;
  cursor: pointer;
}
.dashboard-container {
  margin-top: 10px;
  
}
.project-card {
  margin: 5px 10px 5px 10px;
}
.header-card {
  margin-bottom: 5px;
}
.head-content{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
}

.head-content-left {
  display: flex;
  .avatar {
    flex: 0 0 0px;
    margin-bottom: 8px;
    .avatar-image {
      width: 65px;
      height: 65px;
      border-radius: 10px;
    }
  }
  .content {
    position: relative;
    top: 4px;
    margin-left: 24px;
    flex: 1 1 auto;
    color: rgba(0,0,0,.45);
    line-height: 22px;
    .contentTitle {
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      color: rgba(0,0,0,.85);
      margin-bottom: 12px;
    }
  }
}
.head-content-right {
  display: flex;
  // width: 50%;
  justify-content:flex-end ;
  white-space: nowrap;
  .statItem {
    padding: 0 32px;
    position: relative;
    display: inline-block;
    > p:first-child {
      color: rgba(0,0,0,.45);
      font-size: 14px;
      line-height: 22px;
      margin-bottom: 4px;
    }
    > p {
      color: rgba(0,0,0,.45);
      text-align:center;
      font-size: 14px;
      line-height: 22px;
      margin: 0;
      > span {
        color: rgba(0,0,0,.45);
        font-size: 20px;
      }
    }
    &:after {
      background-color: rgba(0,0,0,.25);
      position: absolute;
      top: 8px;
      right: 0;
      width: 1px;
      height: 40px;
      content: '';
    }
    &:last-child {
      padding-right: 0;
      &:after {
        display: none;
      }
    }
  }
}
</style>
